<template>
  <view class="flex-col page">
    <view class="flex-col flex-auto group_3">
      <view class="flex-col section_3 space-y-18">
        <view class="flex-row justify-between items-center">
          <text class="text_5">已取消订单</text>
          <image class="image_7"
            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6548c1595a7e3f0310ee3f62/6549940ff9a7df001221d25c/16993208888873018240.png" />
        </view>
        <text class="self-start font_3 text_6">您已取消了订单，再下一单吧~</text>
      </view>
      <view class="flex-col relative section_4 space-y-25">
        <view class="flex-row items-center group_4">
          <image class="shrink-0 image_8"
            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6548c1595a7e3f0310ee3f62/6549940ff9a7df001221d25c/16993208888819693679.png" />
          <view class="flex-col flex-auto">
            <text class="font_3 text_7">薛之谦2023中国巡演-广州站天外来物-广州站...</text>
            <view class="flex-row justify-between items-center group view">
              <text class="font_3 text_8">广州 · 正佳广场</text>
              <view class="flex-row items-center space-x-4">
                <image class="shrink-0 image_9"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6548c1595a7e3f0310ee3f62/6549940ff9a7df001221d25c/ed882b68bd8496b5cb943c9c88430602.png" />
                <text class="font_3">导航</text>
              </view>
            </view>
            <text class="self-start font_3 text_9">2023.09.01 周五 20:00</text>
            <view class="flex-row justify-between items-center group_5">
              <view class="flex-row equal-division">
                <view class="flex-row items-start equal-division-item space-x-4">
                  <image class="shrink-0 image_10"
                    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6548c1595a7e3f0310ee3f62/6549940ff9a7df001221d25c/16993208888849314078.png" />
                  <text class="font_4">不支持退换</text>
                </view>
                <view class="flex-row items-start group_6 equal-division-item space-x-4">
                  <image class="shrink-0 image_10"
                    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6548c1595a7e3f0310ee3f62/6549940ff9a7df001221d25c/16993208888849314078.png" />
                  <text class="font_4">实名观演</text>
                </view>
                <view class="flex-row items-start group_6 equal-division-item space-x-4">
                  <image class="shrink-0 image_10"
                    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6548c1595a7e3f0310ee3f62/6549940ff9a7df001221d25c/16993208888849314078.png" />
                  <text class="font_4">纸质票</text>
                </view>
              </view>
              <image class="image_11"
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6548c1595a7e3f0310ee3f62/6549940ff9a7df001221d25c/16993208888855994367.png" />
            </view>
          </view>
        </view>
        <view class="flex-col group_7">
          <view class="flex-row justify-between group_8">
            <view class="group_9">
              <text class="font_3">取票方式：</text>
              <text class="font_5">快递配送</text>
            </view>
            <view class="group_9">
              <text class="font_3">预计</text>
              <text class="font_5">48小时</text>
              <text class="font_3">内发出</text>
            </view>
          </view>
          <view class="flex-col section_5 space-y-16">
            <view class="flex-row items-baseline space-x-8">
              <text class="font_3 text_10">张三</text>
              <text class="font_3 text_10">18898983743</text>
            </view>
            <text class="self-start font_3 text_10 text_11">广东省广州市海珠区赤岗街道物贸大厦29楼2901</text>
          </view>
        </view>
        <view class="flex-col group_7 space-y-12">
          <text class="self-start font_3">观演人信息：2人</text>
          <view class="flex-col section_5 space-y-16">
            <view class="flex-row space-x-10">
              <text class="font_3 text_12">观演人1：</text>
              <text class="font_3 text_12">张大助</text>
              <text class="font_3 text_12">身份证：441***********321X</text>
            </view>
            <view class="flex-row space-x-8">
              <text class="font_3 text_12">观演人2：</text>
              <text class="font_3 text_12">张大助</text>
              <text class="font_3 text_12">身份证：441***********321X</text>
            </view>
          </view>
        </view>
        <view class="flex-col group_10 space-y-12">
          <text class="self-start font_3">商品价格</text>
          <view class="flex-col section_6 space-y-15">
            <view class="flex-row justify-between items-center">
              <text class="font_3 text_12">商品价格：</text>
              <text class="font_6 text_12">￥80</text>
            </view>
            <view class="flex-row justify-between">
              <text class="font_3 text_12">商品数量：</text>
              <text class="font_3 text_12 text_13">1张</text>
            </view>
            <view class="flex-row justify-between items-center">
              <text class="font_3 text_12">快递费：</text>
              <text class="font_6 text_12 text_14">￥11</text>
            </view>
            <view class="flex-row justify-between items-center">
              <text class="font_3 text_12">优惠金额：</text>
              <text class="font_6 text_12">￥0</text>
            </view>
            <view class="flex-row justify-between items-center">
              <text class="font_3 text_12">合计：</text>
              <text class="font_6 text_12">￥80</text>
            </view>
            <view class="flex-row justify-between items-center group_11">
              <text class="font_3 text_12">实付：</text>
              <text class="font_6 text_12">￥80</text>
            </view>
          </view>
        </view>
        <view class="flex-col space-y-12">
          <text class="self-start font_3">其他信息</text>
          <view class="flex-col section_5 space-y-16">
            <view class="flex-row items-center">
              <text class="font_3 text_10">订单编号：</text>
              <text class="font_6 text_10">20390390923029320932093</text>
            </view>
            <view class="flex-row items-center">
              <text class="font_3 text_10">下单时间：</text>
              <text class="font_6 text_10">2023-09-12 17:09:23</text>
            </view>
            <view class="flex-row items-center">
              <text class="font_3 text_10">付款日期：</text>
              <text class="font_6 text_10">2023-09-12 17:09:23</text>
            </view>
          </view>
        </view>
      </view>
      <view class="flex-row relative section_7">
        <view class="flex-col justify-start items-center text-wrapper button"><text class="font_2">删除订单</text></view>
        <view class="flex-col justify-start items-center text-wrapper_2 button">
          <text class="font_2">再下一单</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
</script>

<style scoped lang="scss">
  .page {
    background-color: #f7f7f7;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;

    .group_3 {
      overflow-y: auto;

      .section_3 {
        padding: 34px 16px 122px 24px;
        background-color: #fd5359;

        .text_5 {
          color: #ffffff;
          font-size: 20px;
          font-family: PingFang SC;
          font-weight: 600;
          line-height: 19px;
        }

        .image_7 {
          width: 9px;
          height: 9px;
        }

        .text_6 {
          color: #ffffff;
          line-height: 12px;
          opacity: 0.6;
        }
      }

      .space-y-18 {

        &>view:not(:first-child),
        &>text:not(:first-child),
        &>image:not(:first-child) {
          margin-top: 18px;
        }
      }

      .section_4 {
        margin-top: -90px;
        padding: 0 16px 105px;
        background-color: #ffffff;
        border-radius: 16px 16px 0px 0px;

        .group_4 {
          padding: 20px 0 12px;
          border-bottom: solid 1px #3333330d;

          .image_8 {
            border-radius: 8px;
            width: 67px;
            height: 88px;
          }

          .text_7 {
            margin-left: 10px;
            font-weight: 600;
            line-height: 11.5px;
          }

          .group {
            padding-left: 10px;

            .text_8 {
              line-height: 11.5px;
            }
          }

          .view {
            margin-top: 14px;
          }

          .text_9 {
            margin-left: 10px;
            margin-top: 8px;
            line-height: 10.5px;
          }

          .group_5 {
            margin-top: 10px;

            .equal-division {
              padding: 0 10px;

              .equal-division-item {
                padding: 4px 0;
              }

              .group_6 {
                margin-left: 26px;
              }

              .image_10 {
                width: 10px;
                height: 10px;
              }

              .font_4 {
                font-size: 10px;
                font-family: PingFang SC;
                line-height: 9px;
                color: #333333;
              }
            }

            .image_11 {
              width: 6px;
              height: 6px;
            }
          }

          .space-x-4 {

            &>view:not(:first-child),
            &>text:not(:first-child),
            &>image:not(:first-child) {
              margin-left: 4px;
            }

            .image_9 {
              width: 22px;
              height: 14px;
            }
          }
        }

        .group_7 {
          padding-bottom: 19px;
          border-bottom: solid 1px #3333330d;

          .group_8 {
            padding-bottom: 12px;

            .group_9 {
              line-height: 11px;
              height: 11px;

              .font_5 {
                font-size: 12px;
                font-family: PingFang SC;
                line-height: 11px;
                color: #fd5359;
              }
            }
          }
        }

        .space-y-12 {

          &>view:not(:first-child),
          &>text:not(:first-child),
          &>image:not(:first-child) {
            margin-top: 12px;
          }
        }

        .group_10 {
          padding-bottom: 18px;
          border-bottom: solid 1px #3333330d;

          .section_6 {
            padding: 14px 12px 0 16px;
            background-color: #d9d9d933;
            border-radius: 4px;

            .text_13 {
              margin-right: 4px;
            }

            .text_14 {
              line-height: 8.5px;
            }

            .group_11 {
              padding: 14px 0;
              border-top: solid 1px #33333305;
            }
          }

          .space-y-15 {

            &>view:not(:first-child),
            &>text:not(:first-child),
            &>image:not(:first-child) {
              margin-top: 15px;
            }
          }
        }

        .text_12 {
          opacity: 0.5;
        }

        .section_5 {
          padding: 12px 16px;
          background-color: #d9d9d933;
          border-radius: 4px;

          .space-x-8 {

            &>view:not(:first-child),
            &>text:not(:first-child),
            &>image:not(:first-child) {
              margin-left: 8px;
            }
          }

          .text_10 {
            opacity: 0.45;
          }

          .text_11 {
            line-height: 11.5px;
          }

          .space-x-10 {

            &>view:not(:first-child),
            &>text:not(:first-child),
            &>image:not(:first-child) {
              margin-left: 10px;
            }
          }
        }

        .space-y-16 {

          &>view:not(:first-child),
          &>text:not(:first-child),
          &>image:not(:first-child) {
            margin-top: 16px;
          }
        }

        .font_6 {
          font-size: 12px;
          font-family: PingFang SC;
          line-height: 9px;
          color: #333333;
        }
      }

      .space-y-25 {

        &>view:not(:first-child),
        &>text:not(:first-child),
        &>image:not(:first-child) {
          margin-top: 25px;
        }
      }

      .font_3 {
        font-size: 12px;
        font-family: PingFang SC;
        line-height: 11px;
        color: #333333;
      }

      .section_7 {
        margin-top: -84px;
        padding: 10px 16px 52px;
        background-color: #ffffff;
        border-top: solid 1px #efefef;

        .text-wrapper {
          flex: 1 1 160px;
        }

        .button {
          padding: 12px 0;
          border-radius: 39px;
          height: 42px;
          border: solid 1px #333333;
        }

        .text-wrapper_2 {
          flex: 1 1 160px;
          margin-left: 15px;
          margin-right: 3px;
        }

        .font_2 {
          font-size: 16px;
          font-family: PingFang SC;
          line-height: 15px;
          color: #333333;
        }
      }
    }
  }
</style>